<template>
  <div class="content-center-wrap">
    <Card :bordered="false">
      <div slot="title" class="filter-wrap">
        <span class="collapse-left-icon collapse-icon" @click="handlerCollapse('left')">
          <span v-if="collapseLeftFlag" title="缩小">
            <Icon type="icon iconfont icon-xianghou" />
          </span>
          <span v-else title="放大">
            <Icon type="icon iconfont icon-xiangqian" />
          </span>
        </span>
        <div class="tc">
          <Dropdown trigger="custom" :visible="paramsFlag" class="params-setting-box">
            <Button type="primary" @click="handleParams(true)" size="small">筛选条件</Button>
            <DropdownMenu slot="list">
              <Form ref="paramsForm" :label-width="46">
                <FormItem label="时间">
                  <Slider :min="1" :max="24" v-model="definitelyGas" style="width:100%" show-input />
                </FormItem>
                <div class="bottom-box tr">
                  <Button type="primary" @click="handleParamsSubmit" size="small">确定</Button>
                  <Button type="default" @click="handleParams(false)" size="small" style="margin-left:10px">
                    关闭
                  </Button>
                </div>
              </Form>
            </DropdownMenu>
          </Dropdown>
        </div>
        <span class="collapse-right-icon collapse-icon" @click="handlerCollapse('right')">
          <span v-if="collapseRightFlag" title="缩小">
            <Icon type="icon iconfont icon-xiangqian" />
          </span>
          <span v-else title="放大">
            <Icon type="icon iconfont icon-xianghou" />
          </span>
        </span>
      </div>
      <div class="chart-box">
        <e-heatmap :chartData="eHeatmapData" :drawing="true" @checkArea="handleMapCheckArea" @q-click="handleEHeatmapClick" />
        <Spin fix v-show="eHeatmapLoading">数据加载中...</Spin>
      </div>
    </Card>
    <!-- 工作时长 -->
    <Modal
      v-model="workTimeVisibile"
      title="工作时长"
      @on-ok="handleWorkTimeClick"
      class="modal-p10"
      width="300">
      <p>
        <InputNumber :max="24" :min="1" v-model="workTime" style="width:100%" />
      </p>
    </Modal>
  </div>
</template>
<script>
import { merge, each } from 'lodash'
import { createNamespacedHelpers } from 'vuex'
import { eHeatmapOptions } from './chartOptions'

const { mapActions, mapState } = createNamespacedHelpers('meterReadingOptimize')

export default {
  name: 'meter-reading-optimize-center',
  components: {
    EHeatmap: () => import('@/commons/charts/EHeatmap')
  },
  data() {
    return {
      mapDefaultCenter: null,
      paramsFlag: false,
      definitelyGas: 1,
      definitelyGasBak: 0,
      workTimeVisibile: false,
      workTime: 1,
      cheackAreaPosi: null
    }
  },
  computed: {
    ...mapState(['currentMeterId', 'collapseLeftFlag', 'collapseRightFlag', 'eHeatmapLoading', 'eHeatmapList']),
    eHeatmapData() {
      const _serList1 = []
      const _serList2 = []
      each(this.eHeatmapList, (item) => {
        const { longitude, latitude, meterId, mark, ...rest } = item
        if (mark) {
          _serList1.push({
            name: meterId,
            value: [longitude, latitude, 1],
            ...rest
          })
        } else {
          _serList2.push({
            name: meterId,
            value: [longitude, latitude, 1],
            ...rest
          })
        }
      })
      return merge({}, eHeatmapOptions, {
        bmap: {
          center: this.mapDefaultCenter
        },
        series: [
          {
            data: _serList1
          },
          {
            data: _serList2
          }
        ]
      })
    }
  },
  mounted() {
    this.mapDefaultCenter = this.$store.getters.mapCenter
    this.loadingEHeatmapList()
  },
  methods: {
    ...mapActions([
      'changeCollapse',
      'loadingEHeatmapList',
      'loadingYqglList',
      'loadYqglPieData',
      'changeSelectAreaFlag'
    ]),
    handleParams(flag) {
      this.paramsFlag = flag
      if (!flag && (Number(this.definitelyGas) !== Number(this.definitelyGasBak))) {
        this.definitelyGas = this.definitelyGasBak
      }
    },
    handlerCollapse(arg) {
      if (arg === 'left') {
        this.changeCollapse({
          type: arg,
          status: !this.collapseLeftFlag
        })
      } else if (arg === 'right') {
        this.changeCollapse({
          type: arg,
          status: !this.collapseRightFlag
        })
      }
    },
    handleParamsSubmit() {
      if (Number(this.definitelyGas) !== Number(this.definitelyGasBak)) {
        this.definitelyGasBak = this.definitelyGas
        this.loadingEHeatmapList({
          definitelyGas: this.definitelyGas
        })
        this.$nextTick(() => {
          this.handleParams(false)
        })
      }
    },
    handleMapCheckArea(data) {
      this.cheackAreaPosi = data
      this.workTimeVisibile = true
    },
    handleWorkTimeClick() {
      this.changeSelectAreaFlag(true)
      const { xMaxSize, xMinSize, yMaxSize, yMinSize } = this.cheackAreaPosi
      this.loadYqglPieData({
        hours: this.workTime,
        maxLat: xMaxSize,
        minLat: xMinSize,
        minLng: yMinSize,
        maxLng: yMaxSize
      })
    },
    handleEHeatmapClick(data = {}) {
      this.changeSelectAreaFlag(false)
      const { name } = data
      if (name) {
        this.loadingYqglList({
          meterId: name
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.content-center-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .collapse-icon {
    position: absolute;
    top: 0;
  }
  .collapse-left-icon {
    left: 0;
  }
  .collapse-right-icon {
    right: 0;
  }

  .filter-wrap {
    position: relative;
    text-align: center;
    border-bottom: none;
  }

  .collapse-icon {
    cursor: pointer;
  }

  .chart-box {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .params-setting-box {
    @{deep} .ivu-select-dropdown {
      width: 300px;
      padding: 10px 10px 5px;

      .ivu-form-item {
        flex: 1;
      }
    }
  }
}
</style>
